<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决中文pdf乱码-----终极版</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script> 
    <!--script src="./js/jquery-1.10.2.min.js"></script-->
    <!-- ==== -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> -->
    <script src="./js/jspdf.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.0/jspdf.debug.js"></script> -->
    <!-- ===== -->
    <!-- <script language="javascript" type="text/javascript" src="https://rawgit.com/sphilee/jsPDF-CustomFonts-support/master/dist/jspdf.customfonts.debug.js"></script>
	<script language="javascript" type="text/javascript" src="https://rawgit.com/sphilee/jsPDF-CustomFonts-support/master/dist/default_vfs.js"></script> -->
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <!--script src="./js/faker.min.js"></script-->
    <script src="./font/font.js"></script>
    <!--<script src="./font/simhei.js"></script>
    <script src="./font/msyh.js"></script>-->
    <!-- 用哪个字体就引入哪个文件，如需引入多个字体请更改变量名并在下面代码中调用 -->
</head>
<body>
    <template1>
  <div>
    <table id="my_table_1" border="1">
      <thead>
      <tr>
        <th>xx</th>
        <th>dabao</th>
        <th>熊猫</th>
        <th>国宝</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>其他事件</td>
        <td>开发阶段</td>
        <td>任务阶段</td>
        <td>测试</td>
      </tr>
      <tr>
        <td colspan="4">无数据</td>
      </tr>
      <tr>
        <td rowspan="3">人员</td>
        <td>姓名</td>
        <td>学历</td>
        <td>年龄</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>无</td>
        <td>2</td>
      </tr>
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      <tr>
        <td>新数据</td>
        <td>王五</td>
        <td>无</td>
        <td>2</td>
      </tr> 
      </tbody>
    </table>
  </div>
</template1>
    <button onclick="generate()">导出 pdf</button>

    <div style="height: 600px;">    <!-- pdf展示 -->
        <iframe id="output" src="" frameborder="0" width="100%" height="90%"></iframe>
    </div>
    
    <script>
        function setTextCenter (doc, txtLength) {
            var fontSize = doc.getFontSize()
            // Get page width
            var pageWidth = doc.internal.pageSize.width
            const txtWidth = txtLength * fontSize / doc.internal.scaleFactor
            return (pageWidth - txtWidth) / 2
        }
        //var doc =new jsPDF('landscape');  //横向的pdf文档
        var doc = new jsPDF('p', 'pt', 'a4');// 获取实例 
         
        //设置pdf的描述信息（标题、作者等）
        doc.setProperties({
            title: 'showcai.net',
            subject: 'This is the subject',
            author: 'showcai',
            keywords: 'generated, javascript, web 2.0, ajax',
            creator: 'showcai'
        });
        
        // ===============================  设置字体
        doc.addFileToVFS('font.ttf', moo);
        doc.addFont('font.ttf', 'custom', 'normal');
        doc.setFont('custom');//字体
        
        doc.setFontType("normal");//样式
        // ===============================


        doc.text(40, 30, '个人号还挺好')      //  渲染title
       
        doc.text( '左对齐的\r这几行文字\r还行', 50, 310, 30, 'left' );//左对齐
        doc.text( '这几行文本\r都是居中对齐的\r居中', 300, 300,  'center' );//居中对齐
        doc.text( '那么\r这几行文本\r靠右对齐', 550, 300, 330, 'right' );//右对齐

        
        
        doc.text(420, 20, 'This is page 1');
        
        //增加一个新页面
        doc.addPage();  
        
        if (doc.autoTableHtmlToJson) {
            var jianbiao = doc.autoTableHtmlToJson(document.getElementById('my_table_1'));
            var i=0;
            var options={ 
                    styles: { fillColor: [255, 255, 255], font: 'custom', textColor: [0,0,0] },   // 样式配置，有些类似canvas
                    theme: 'grid',
                    didParseCell: (HookData) => {
                        //console.log("aaa "+(i))
                    },     //  当插件完成解析单元格内容时调用
                    willDrawCell: (HookData) => {
                        if(HookData &&HookData.row&&HookData.row.index ){
                                if(HookData.row.index %2==0){
                                    doc.setFillColor(230);
                                }else{
                                    doc.setFillColor(245);
                                }
                        }
                    },    //   在绘制单元格或行之前调用
                    didDrawCell: (data) => {    // 在渲染完单元格后的事件
                        //console.log(data.column.raw,data.cell.raw,data);
                        //console.log("ccc "+(i++))
                    },
                    didDrawPage: (HookData) => {
                        //添加页面水印
                        doc.setFontSize(50);//字体大小
                        doc.setTextColor(200);//(0,0,255); //文字颜色
                        doc.text(100, 600, ' 太原市晋泽中学校 tysjzzxx',45); 
                        doc.setFontSize(10);//字体大小
                        doc.setTextColor(0);//(0,0,255); //文字颜色
                        
                    },   //   插件在页面上绘制完所有内容后调用
            }
                
            options["columns"]=jianbiao.columns;
            options["body"]=jianbiao.data;
            doc.autoTable(options);
        }else {
            console.log('无法生成table表格数据')
        }
        /*
        doc.autoTable({                   // 这是动态获取后台table数据数据导出
            columns: [       // 可以传参
                { header: '表头1', dataKey: 'europe' },
                { header: '表头2', dataKey: 'asia' },
                { header: '表头3', dataKey: 'america' },
            ],
            body: [           // 可以传参
                { europe: '大幅度', america: '更丰富', asia: '防辐射' },
                { europe: '发热', america: '额发热', asia: '大V发吃饭' },
            ],
            styles: { fillColor: [255, 255, 255], font: 'custom', textColor: [0,0,0] },   // 样式配置，有些类似canvas
            theme: 'grid',
            didDrawCell: (data) => {    // 在渲染完单元格后的事件
                //console.log(data.column.raw,data.cell.raw,data);
            },
            didParseCell: (HookData) => {},     //  当插件完成解析单元格内容时调用
            willDrawCell: (HookData) => {},    //   在绘制单元格或行之前调用
            didDrawPage: (HookData) => {},   //   插件在页面上绘制完所有内容后调用
        });
        */
        
        //增加一个新页面
        doc.addPage();  
        
        doc.setFontSize(10)
        doc.setTextColor(105,105,105);//设置字体颜色
        doc.text( '居中标题',setTextCenter(doc,4), 30)      //  渲染title
        

        
        if (doc.autoTableHtmlToJson) {
            var jianbiao = doc.autoTableHtmlToJson(document.getElementById('my_table_1'));
            var options = {
                startY: 70, // 表格距离顶部的距离
                theme: 'striped',
                //tableWidth: 'auto',
                //columnWidth: 'auto',
                styles: {
                  overflow: 'linebreak',
                  font: 'custom', // 设置中文
                  fontSize: 10,//默认字体大小
                  color: '#000'
                },
                columnStyles: {
                  0: { cellWidth: 100,fontSize:15,fontWeight:'bold',halign:"center",textColor:'#333383',valign:'middle',},
                  1: { cellWidth: 100,fontSize:15,fontWeight:'normal',fillColor: 240,},
                  2: { cellWidth: 100,fontSize:15,fontWeight:'bold',halign:"center",}
                },
                headStyles: { // 头部
                  fontSize:20,
                  halign:"center",
                  fillColor: 230,
                  textColor:'#333333',// 头部字体设置为白色可以隐藏字体、或者<th>标签内容为空，单head的高度还是占的。目前还设置不了头部的高度
                  
                },
                didParseCell: (HookData) => {
                    //console.log("aaa "+(i))
                },     //  当插件完成解析单元格内容时调用
                willDrawCell: (HookData) => {
                    if(HookData &&HookData.row&&HookData.row.index ){
                            if(HookData.row.index %2==0){
                                doc.setFillColor(230);
                            }else{
                                doc.setFillColor(245);
                            }
                    }
                },    //   在绘制单元格或行之前调用
                didDrawCell: (data) => {    // 在渲染完单元格后的事件
                    if(data &&data.cell&&data.cell.x &&data.cell.y ){
                        doc.setDrawColor(255, 255, 255); 
                        doc.rect(data.cell.x , data.cell.y, data.cell.x+data.cell.width , data.cell.y+data.cell.height); 
                    }
                    //console.log(data.column.raw,data.cell.raw,data);
                    if(i++==10)
                        console.log(data)
                },
                didDrawPage: (HookData) => {
                    //添加页面水印
                    doc.setFontSize(50);//字体大小
                    doc.setTextColor(200);//(0,0,255); //文字颜色
                    doc.text(100, 600, ' 太原市晋泽中学校 tysjzzxx',45); 
                    doc.setFontSize(10);//字体大小
                    doc.setTextColor(0);//(0,0,255); //文字颜色
                    
                },   //   插件在页面上绘制完所有内容后调用
            }
        
            options["columns"]=jianbiao.columns;
            options["body"]=jianbiao.data;
            doc.autoTable(options);
        }else {
            console.log('无法生成table表格数据')
        }
        
        
        
        //添加页面水印
        doc.setFontSize(50);//字体大小
        doc.setTextColor(200);//(0,0,255); //文字颜色
        doc.text(100, 600, ' 太原市晋泽中学校 tysjzzxx',45); 
       
        document.getElementById("output").src = doc.output('datauristring');   // 渲染pdf

        function generate() {   // 导出pdf
            doc.save("table.pdf");
        }
    </script>
</body>
</html>